<template>
    <div>
        <custom-table
            ref="ruleTableRef"
            :rules="tableRules"
            class="margin-t-16"
            size="small"
            rowKey="id"
            :pagination="false"
            :columns="columnsA"
            :data-source="newList"
            v-if="detail.dataSource === '外部'"
        >
            <template #type="{ text }">
                {{ $filters.requireReportTypeFilter(text) }}
            </template>
            <template #addCount="{ record }">
                <flexbox v-if="disabled">
                    <flexbox v-if="!isNoData">
                        <span v-if="record.addCount || record.addCount === 0">{{ record.addCount }}</span>
                        <a-tag color="red" v-else>未填报</a-tag>
                    </flexbox>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.addCount" v-else />
            </template>
            <template #yonyGrowth="{ record }">
                <flexbox v-if="record.addCount || record.addCount == 0">
                    <flexbox :class="record.addCount - record.lastAddCount > 0 ? 'error-color' : 'success-color'" v-if="record.lastAddCount">
                        {{ record.lastAddCount ? ((record.addCount - record.lastAddCount) / record.lastAddCount).toFixed(2) : '' }}
                        <ArrowUpOutlined v-if="record.addCount - record.lastAddCount > 0" />
                        <ArrowDownOutlined v-else />
                    </flexbox>
                </flexbox>
            </template>
            <template #processCount="{ record }">
                <flexbox v-if="disabled">
                    <flexbox v-if="!isNoData">
                        <span v-if="record.processCount || record.processCount === 0">{{ record.processCount }}</span>
                        <a-tag color="red" v-else>未填报</a-tag>
                    </flexbox>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.processCount" v-else />
            </template>
            <template #onlineCount="{ record }">
                <flexbox v-if="disabled">
                    <flexbox v-if="!isNoData">
                        <span v-if="record.onlineCount || record.onlineCount === 0">{{ record.onlineCount }}</span>
                        <a-tag color="red" v-else>未填报</a-tag>
                    </flexbox>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.onlineCount" v-else />
            </template>
            <template #suspendCount="{ record }">
                <flexbox v-if="disabled">
                    <flexbox v-if="!isNoData">
                        <span v-if="record.suspendCount || record.suspendCount === 0">{{ record.suspendCount }}</span>
                        <a-tag color="red" v-else>未填报</a-tag>
                    </flexbox>
                </flexbox>
                <a-input-number :min="0" v-model:value="record.suspendCount" v-else />
            </template>
        </custom-table>

        <custom-table
            ref="ruleTableRef"
            :rules="tableRules"
            class="margin-t-16"
            size="small"
            rowKey="id"
            :pagination="false"
            :columns="columnsA"
            :data-source="newList"
            v-else
        >
            <template #type="{ text }">
                {{ $filters.requireReportTypeFilter(text) }}
            </template>
            <template #addCount="{ record }">
                <a @click="jumpTo(record.type, record.addIds)" v-if="record.addIds">{{ record.addCount }}</a>
            </template>
            <template #yonyGrowth="{ record }">
                <flexbox :class="record.addCount - record.lastAddCount > 0 ? 'error-color' : 'success-color'" v-if="record.lastAddCount">
                    {{ record.lastAddCount ? (Math.abs(record.addCount - record.lastAddCount) / record.lastAddCount).toFixed(2) : '' }}
                    <ArrowUpOutlined v-if="record.addCount - record.lastAddCount > 0" />
                    <ArrowDownOutlined v-else />
                </flexbox>
            </template>
            <template #processCount="{ record }">
                <a @click="jumpTo(record.type, record.addIds, '2')" v-if="record.processCount">{{ record.processCount }}</a>
                <span v-else>{{ record.processCount }}</span>
            </template>
            <template #onlineCount="{ record }">
                <a @click="jumpTo(record.type, onlineIds, '3')" v-if="record.onlineCount">{{ onlineCounts }}</a>
                <span v-else>{{ record.onlineCount }}</span>
            </template>
            <template #suspendCount="{ record }">
                <a @click="jumpTo(record.type, record.addIds, '6')" v-if="record.suspendCount">{{ record.suspendCount }}</a>
                <span v-else>{{ record.suspendCount }}</span>
            </template>
        </custom-table>
    </div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { ArrowUpOutlined, ArrowDownOutlined } from '@ant-design/icons-vue';
import { detailColumns } from '@/views/energyManage/analysisReport/config/detailColumns';
import { CustomTable } from '@/components';
import { defineComponent, ref, unref, reactive, toRefs, watch, computed } from 'vue';
export default defineComponent({
    components: {
        CustomTable,
        ArrowUpOutlined,
        ArrowDownOutlined
    },
    props: {
        list: {
            type: Array,
            default: () => []
        },
        detail: {
            type: Object,
            default: () => ({})
        },
        hasAuth: {
            type: Boolean,
            default: false
        },
        isNoData: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const router = useRouter();
        const { columnsA } = detailColumns;
        const ruleTableRef = ref<any>();
        // 表格规则
        const tableRules = {};
        const state = reactive<any>({
            newList: [],
            onlineIds: '',
            onlineCounts: 0
        });
        const disabled = computed(() => {
            return +props.detail.stage > 2 || !props.hasAuth || props.isNoData;
        });
        const validate = async () => {
            // let res = unref(disabled);
            // if (!res) {
            //     res = await unref(ruleTableRef).validate();
            // }
            return true;
        };
        const jumpTo = (type, ids, status = null) => {
            const query: any = {
                ids,
                type,
                systemName: props.detail.systemName
            };
            const path = type === '1' ? '/energyManage/analysisReport/taskDetailList' : '/energyManage/analysisReport/proDetailList';
            if (status) {
                query.status = status;
            }
            router.push({
                path,
                query
            });
        };
        watch(
            () => props.list,
            (n) => {
                state.newList = [...n];
                // 获取上线需求id集合
                if (props.detail.releaseVersion.length) {
                    let num = 0;
                    const arr: any = [];
                    const list = props.detail.releaseVersion;
                    list.forEach((item) => {
                        num += item.onlineRequires;
                        arr.push(item.onlineRequireIds);
                    });
                    state.onlineCounts = num;
                    state.onlineIds = arr.join(',');
                } else {
                    state.onlineIds = '';
                }
            },
            {
                immediate: true
            }
        );
        return {
            columnsA,
            ruleTableRef,
            tableRules,
            disabled,
            ...toRefs(state),
            jumpTo,
            validate
        };
    }
});
</script>

<style scoped >
</style>